<template>
  <div class="w">
    <h3>账户资料</h3>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账户设置</span>
      </div>
      <div class="userinfo-item">
        <span class="userinfo-left">邮箱：{{getUserInfo.email}}</span>
        <el-link class="userinfo-right" :underline="false" @click="changeInfo('修改邮箱','email')">修改邮箱</el-link>
      </div>
      <div class="userinfo-item">
        <span class="userinfo-left">手机号：{{getUserInfo.phone}}</span>
        <el-link class="userinfo-right" :underline="false" @click="changeInfo('修改手机号','phone')">修改手机号</el-link>
      </div>
      <div class="userinfo-item">
        <span class="userinfo-left">密码：***********</span>
        <el-link class="userinfo-right" :underline="false" @click="changeInfo('修改密码','password')">修改密码</el-link>
      </div>
      <div class="userinfo-item">
        <span class="userinfo-left">邮箱：{{getUserInfo.address}}</span>
        <el-link class="userinfo-right" :underline="false" @click="changeInfo('修改地址','address')">修改地址</el-link>
      </div>
    </el-card>
    <div>&nbsp;</div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import Footer from "@/components/common/footer/Footer";
import {updateCommonUser} from "@/network/user";
import {SET_LOGIN_STATUE, SET_USERINFO} from "@/store/mutations-type";
import {getUserInfoByMySelf} from "@/network/adminUser";
import store from "@/store";
export default {
  name: "UserInfo",
  components: {Footer},
  data(){
    return{
      userId:'',
    }
  },
  methods:{
    changeInfo(name,type){
      this.$prompt(name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false,
        roundButton: true,
        inputValidator:function (val){
          if (type==='email'){
            if (!new RegExp(/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/).test(val)) {
              return '邮箱格式不正确';
            }
          }else if(type==='phone'){
            if (val == null || val.length <7 || val.length > 11) {
              return '长度在7-11';
            }
          }else if(type==='password'){
            if (val == null || val.length <6 || val.length > 12) {
              return '长度在6-12';
            }
            if (!new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/).test(val)) {
              return '必须包含至少一位数字和一位字母';
            }
          }else if(type==='address'){
            if (val == null || val.length <4 || val.length > 20) {
              return '长度在4-20';
            }
          }
        },
      }).then(({ value }) => {
        updateCommonUser({type:type,value:value},this.userId).then(res=>{
          this.$message.success('更新成功')
          getUserInfoByMySelf().then(async res=>{
            this.$store.commit(SET_USERINFO,res.data.data)
          })
        })
      }).catch(() => {});
    }
  },
  computed:{
    getUserInfo(){
      return this.$store.getters.getUserInfo
    }

  },
  mounted() {
    this.userId = this.$store.getters.getUserInfo.id
  }
}
</script>

<style scoped>
  .w {
    width: 1200px;
    margin: 0 auto;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .clearfix span {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
  }
  .userinfo-item {
    display: block;
    width: 100%;
    height: 20px;
    margin:10px 0;
    font-size: 14px;
  }
  .userinfo-left {
    float: left;
  }
  .userinfo-right {
    float: right;
    color: #333333;
  }
</style>